Materials材質設計

一、材質的基本概念 What are Materials

材質是一種視覺效果，常透過模糊、透明度與光線透視等方式，幫助介面建立前後層級感，突出控制元件與內容之間的關係，從而提高介面的可讀性與操作感。

二、Liquid Glass 動態玻璃材質

功能與特點

• 專用於控制元件與導航區域（如標籤欄、側邊欄等）。

• 顯示於內容層上方，可透出下層內容，增強介面深度與活力。

• 自動適配系統元件，提升可視一致性。

使用建議

• 僅用於功能性控制元件區域，不要用在內容層。

• 避免濫用，過多自定義控制元件使用 Liquid Glass 會造成層級混亂、干擾視覺焦點。

• 例外：如滑塊、開關等臨時互動控制元件在內容層中啟用時可短暫使用該效果以增強互動感。

三、標準材質 Standard Materials

功能與應用

• 用於內容層（如背景、介面內分割槽等），可搭配模糊、vibrancy（鮮明度）、混合模式使用。

• 提供結構感與上下層視覺分離。

使用建議

• 按語義選擇材質與效果，避免只依據顏色選材質（顏色會隨系統變化）。

• 前景內容使用系統 vibrant colors，確保在各種材質背景下都具備足夠對比度與可讀性。

• 材質厚度的選擇影響對比感：
  • 厚材質：更不透明，適合用作高對比背景。
  • 薄材質：更透明，有助使用者感知背後內容。

四、各平臺的使用建議 Platform Considerations

iOS 與 iPadOS

• 提供 label、fill 和 separator 三類 vibrant color 層級，適配各種材質：
  • 標籤 vibrancy 層級：label（預設）、secondaryLabel、tertiaryLabel、quaternaryLabel
    • 避免在 ultraThin 和 thin 材質上使用quaternaryLabel（對比度過低）。
  • 填充 fill 層級：fill（預設）、secondaryFill、tertiaryFill
  • 分隔線 separator：僅一種 vibrancy 樣式，適用於全部材質。

macOS

• 提供多種系統材質及其 vibrant 版本。

• 兩種混合模式：
  • behind window：背景融合在整個視窗背後。
  • within window：融合內容僅限於當前視窗。

• 建議根據場景選擇 vibrancy 開啟時機，並在不同系統設定下進行測試。

tvOS

• 優先使用薄材質以突出控制元件與介面層次感，保留陰影以增強深度。

• 材質選用建議：
  • ultraThin：適合淺色全屏介面
  • thin：適合半透明淺色浮層
  • regular：通用浮層
  • thick：適合深色浮層
  • ultraThick：深色全屏背景

• 可使用 prominent blur 實現適配性強的全屏背景。

visionOS

• 預設視窗使用系統不可更改的玻璃材質（glass），結合現實環境與虛擬物體調整亮度與對比度。

• 不支援 Dark Mode，材質自動調節亮度。

• 避免使用不透明背景，否則會遮擋使用者視野。

• 若需區分結構或提升互動感，可選擇以下系統材質：
  • thin：突出互動元素（如按鈕）
  • regular：區分模組（如側邊欄）
  • thick：在深色背景中突出顯示區塊

• 系統提供三種 vibrancy 層級：
  • label：標準文字
  • secondaryLabel：說明文字或副標題
  • tertiaryLabel：用於非活躍狀態元素

watchOS

• 材質常用於模態檢視，提供對比感和層級感。

• 不建議移除或替換系統預設模態材質背景。